<template>
    <div class="payContainer">
        <!-- head -->
        <van-nav-bar
            title="提交订单"
            left-arrow
            @click-left="onClickLeft"
            fixed
        />
        <div class="continer">
            <div class="cardCont">
                <van-cell icon="location" is-link>
                    <template slot="title">
                        <div class="custom-text">{{$store.state.user.address}}</div>
                        <div class="userInfo">
                            <span>{{$store.state.user.name}}</span>
                            <span>{{$store.state.user.phone}}</span>
                        </div>
                    </template>
                </van-cell>
                <van-cell icon="clock">
                    <template slot="title">
                        <span class="custom-text">立即送出</span>
                        <span class="sendTime">(大约{{new Date() | formatDate}}送达)</span>
                    </template>
                </van-cell>
            </div>
            <div class="cardCont">
                <van-cell :title="$store.state.shopInfo.name" icon="shop-o" />
                <van-card
                    :price="$store.state.buyList[index].price"
                    :title="$store.state.buyList[index].text"
                    :thumb="$store.state.buyList[index].img"
                    v-for="(item, index) in $store.state.buyList"
                    :key="index"
                />
                <van-cell title="包装费" :value="`¥${$store.state.shopInfo.packPrice * $store.state.buyList.length}`" />
                <van-cell title="配送费" :value="`¥${$store.state.shopInfo.sendPrice}`" />
                <van-cell>
                    <div class="countPrice">小计<span>¥{{$store.getters.payBill}}</span></div>
                </van-cell>
            </div>
            <div class="cardCont">
                <van-cell title="支付方式" value="在线支付" />
                <van-cell title="餐具数量" :value="tablewareNum" is-link @click="show=true"/>
                <van-cell title="备注" value="口味、偏好等要求" is-link @click="noteShow=true" />
                <van-cell title="发票" value="暂不支持开发票" />
            </div>
            <van-submit-bar
                :price="($store.state.countPrice + $store.state.shopInfo.packPrice * $store.state.buyList.length + $store.state.shopInfo.sendPrice).toFixed(2) * 100"
                button-text="提交订单"
                @submit="onSubmit"
            />
        </div>
        <!-- 餐具份数  -->
        <van-actionsheet v-model="show">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="onCancel"
                @confirm="onConfirm"
            />
        </van-actionsheet>
        <!-- 备注 -->
        <van-popup v-model="noteShow" position="bottom" :overlay="false">
            <div class="btn">
                <span class="close" @click="close">取消</span>
                <span class="ok" @click="ok">确定</span>
            </div>
            <van-cell-group>
                <van-field
                    v-model="noteTxt"
                    label="留言"
                    type="textarea"
                    placeholder="口味、偏好等要求"
                    rows="5"
                    autosize
                />
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script>
import { formatDate } from '../../common/dateTools'
export default {
    data() {
        return {
            columns: ['无需餐具', '1人', '2人', '3人', '4人', '5人', '6人', '7人', '8人', '9人', '10人', '10人以上'],
            show: false,
            tablewareNum: '未选择',
            noteShow: false,
            noteTxt: '',
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        // 提交订单
        onSubmit() {
            this.$router.push({path: '/order'})
        },
        onConfirm(value, index) {
            this.show = false
            this.tablewareNum = value
            // alert(`当前值：${value}, 当前索引：${index}`);
        },
        onCancel() {
            this.show = false
        },
        close() {
            this.noteShow = false
        },
        ok() {
            this.noteShow = false
        }
    },
    filters: {
        formatDate(time) {
            let date = new Date(time)
            let newDate = date.getTime() + window.this.$store.state.shopInfo['els'][2].substr(0, 2) * 1000 * 60
            date = new Date(newDate)
            return formatDate(date, 'hh:mm')
        }
    },
    created() { 
        window.this = this
    },
    destroyed() {
        window.this = undefined
    }
}
</script>

<style lang="less" scoped>
    .payContainer {
        background: #f4f4f4;
        .continer {
            margin: 56px 10px 60px;
            .cardCont {
                margin-bottom: 10px;
                .custom-text {
                    font-weight: 700;
                    font-size: 15px;
                    .userInfo {
                        font-weight: 400;
                        font-size: 14px;
                        color: #777;
                    }
                }
                .sendTime {
                    color: #348BED;
                }
                .van-card {
                    margin-top: 0;
                    .van-card__title {
                        margin-top: 10px;
                        font-size: 15px;
                    }
                    .van-card__bottom {
                        margin-top: 20px;
                    }
                }
                .countPrice {
                    text-align: right;
                    font-weight: 700;
                    span {
                        margin-left: 5px;
                        color: #FB4E44;
                    }
                }
            }
        }
        .btn {
            display: flex;
            justify-content: space-between;
            padding: 10px 15px 0;
            .close {
                color: #f44;                
            }
            .ok {
                color: #07c160;
            }
        }
    }
</style>
